html,body{ font-family:'微软雅黑 Regular', '微软雅黑';}
body{overflow-x: hidden;background:#f7f7f8;}
body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote，th,td,a{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0;}
address,caption, cite,code,dfn,em,strong,th,var{
	font-style:normal;font-weight:normal;
}
ol,ul,li {list-style:none;}
capation,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
a{ text-decoration:none; cursor:pointer;color: #000000;}
a:hover{ text-decoration:none;}
a:focus{ border:none; outline:none;}
img{ border:none; outline: none; padding: 0; margin: 0;vertical-align: middle;}
button{border:none;cursor: pointer;}
button,input,select,option{outline: none;}
input:focus{border:none;background:none;}
input[type=text]{ -webkit-tap-highlight-color:rgba(0,0,0,0);}  
input[type=radio]{ -webkit-tap-highlight-color:rgba(0,0,0,0);}  

.clearfix:before,.clearfix:after { content:""; display:table;}
.clear{ clear:both; display:block; font-size:0;
 height:0; line-height:0; overflow:hidden;
}
.clear-l{clear: both;}
@media screen and (min-width:1441px) and (max-width:1920px) {
    body {
        width:750px ;margin: 0 auto;
    }
}



@keyframes dh{
    from {bottom: 5%;}
    to {bottom: 3%;}
}

#box1 { width: 750px; margin: 0 auto; overflow: hidden;}
.item:nth-child(even){ background-color: #f00; }
{ transition-duration: 300ms; transform: translate3d(0,0,0); }
.item:nth-child(odd){ background:url(../img/bg1.jpg) no-repeat; }
.item{ position: relative; overflow: hidden; }
.item:nth-child(1) p:nth-child(1) {
	position: absolute; top: -100%; 
	left: 0; width: 100%; height: 100px; 
	font-size: 34px; text-align: center;
	color: #fff; line-height: 100px; transition: top .5s; }
.item:nth-child(1).on p:nth-child(1) { top: 0; }
.item:nth-child(1) p:nth-child(2) {
	 position: absolute; top: 15%;
	  left: -100%; width: 100%; 
	  font-size: 32px; text-align:
	   center; color: #fff; line-height: 100px;
	    transition: left .8s; 
	}
.item:nth-child(1).on p:nth-child(2) { left: 0; }
.item:nth-child(1) p:nth-child(3) { 
	position: absolute; top: 25%; right: -100%;
	 width: 300px; height: 300px; background-color: #ccc; 
	 font-size: 32px; text-align: center; color: #fff; 
	 line-height: 100px; transition: right .8s;
	  }
.item:nth-child(1).on p:nth-child(3) { right: 0; }
.item:nth-child(1) p:nth-child(4) {
	 position: absolute; top: 55%; left: -100%; 
	 width: 300px; height: 300px; background-color: #e8e8e8; 
	 transition: left 1s; }
.item:nth-child(1).on p:nth-child(4) { left: 0; }
.item:nth-child(1) p:nth-child(5) { 
	position: absolute; bottom: -100%; 
	left: 0; width: 100%; font-size: 18px;
	 text-align: center; color: #fff; line-height: 100px;
	   transition: bottom 1.2s; }
.item:nth-child(1).on p:nth-child(5) { 
	bottom: 5%; animation: dh 1s infinite;
	 }

.item:nth-child(2) p:nth-child(1) { 
	position: absolute; top: -100%; left: 0; width: 100%; height: 100px;   font-size: 34px; text-align: center; color: #fff; line-height: 100px; transition: top .5s; }
.item:nth-child(2).on p:nth-child(1) { top: 0; }
.item:nth-child(2) p:nth-child(2) { position: absolute; top: 15%; right: -100%; width: 100%; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: right .8s; }
.item:nth-child(2).on p:nth-child(2) { right: 0; }
.item:nth-child(2) p:nth-child(3) { position: absolute; top: 25%; left: -100%; width: 300px; height: 300px; background-color: #ccc; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: left .8s; }
.item:nth-child(2).on p:nth-child(3) { left: 0; }
.item:nth-child(2) p:nth-child(4) { position: absolute; top: 55%; right: -100%; width: 300px; height: 300px; background-color: #e8e8e8; transition: right 1s; }
.item:nth-child(2).on p:nth-child(4) { right: 0; }
.item:nth-child(2) p:nth-child(5) { position: absolute; bottom: -100%; left: 0; width: 100%; font-size: 18px; text-align: center; color: #fff; line-height: 100px;  transition: bottom 1.2s; }
.item:nth-child(2).on p:nth-child(5) { bottom: 5%; animation: dh 1s infinite; }

.item:nth-child(3) p:nth-child(1) { position: absolute; top: -100%; left: 0; width: 100%; height: 100px;   font-size: 34px; text-align: center; color: #fff; line-height: 100px; transition: top .5s; }
.item:nth-child(3).on p:nth-child(1) { top: 0; }
.item:nth-child(3) p:nth-child(2) { position: absolute; top: 15%; left: -100%; width: 100%; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: left .8s; }
.item:nth-child(3).on p:nth-child(2) { left: 0; }
.item:nth-child(3) p:nth-child(3) { position: absolute; top: 25%; right: -100%; width: 300px; height: 300px; background-color: #ccc; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: right .8s; }
.item:nth-child(3).on p:nth-child(3) { right: 450px; }
.item:nth-child(3) p:nth-child(4) { position: absolute; top: 55%; left: -100%; width: 300px; height: 300px; background-color: #e8e8e8; transition: left 1s; }
.item:nth-child(3).on p:nth-child(4) { left: 450px; }
.item:nth-child(3) p:nth-child(5) { position: absolute; bottom: -100%; left: 0; width: 100%; font-size: 18px; text-align: center; color: #fff; line-height: 100px;  transition: bottom 1.2s; }
.item:nth-child(3).on p:nth-child(5) { bottom: 5%; animation: dh 1s infinite; }

.item:nth-child(4) p:nth-child(1) { position: absolute; top: -100%; left: 0; width: 100%;  height: 100px;  font-size: 34px; text-align: center; color: #fff; line-height: 100px; transition: top .5s; }
.item:nth-child(4).on p:nth-child(1) { top: 0; }
.item:nth-child(4) p:nth-child(2) { position: absolute; top: 15%; left: -100%; width: 100%; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: left .8s; }
.item:nth-child(4).on p:nth-child(2) { left: 0; }
.item:nth-child(4) p:nth-child(3) { position: absolute; top: 25%; right: -100%; width: 300px; height: 300px; background-color: #ccc; font-size: 32px; text-align: center; color: #fff; line-height: 100px; transition: right .8s; }
.item:nth-child(4).on p:nth-child(3) { right: 0; }
.item:nth-child(4) p:nth-child(4) { position: absolute; top: 55%; left: -100%; width: 300px; height: 300px; background-color: #e8e8e8; transition: left 1s; }
.item:nth-child(4).on p:nth-child(4) { left: 0; }
.item:nth-child(4) p:nth-child(5) { position: absolute; bottom: -100%; left: 0; width: 100%; font-size: 18px; text-align: center; color: #fff; line-height: 100px;  transition: bottom 1.2s; }
.item:nth-child(4).on p:nth-child(5) { bottom: 5%; }